<template>
  <div class="hot">
    <div class="header">
      <div class="left">
        <span class="iconfont">&#xe8d7;</span>
        <span>热门本周榜单</span>
      </div>
      <div class="right">
        <span>全部榜单</span>
        <span class="iconfont">&#xe60b;</span>
      </div>
      <div class="no-float"></div>
    </div>
    <div class="main">
      <ul>
        <li class="item" :key="index" v-for="(item,index) in items">
          <div class="header">
            <img :src="item.image" />
            <span v-show="index < 3">Top.{{index+1}}</span>
          </div>
          <div class="footer">
            <div class="title" v-text="item.title"></div>
            <div class="money"><span style="color: #ff8300">￥<em v-text="item.money"></em></span>起</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'IndexHot',
  props: ['items'],
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped="">
  @import '~@/assets/style/function.styl'
  .hot
    padding: .3rem
    background-color: #ffffff
    margin-top: .3rem;
    margin-bottom: .3rem
    >.header
      padding-bottom: .15rem
      .left
        float: left
        .iconfont
          color: #ff7f45
        span
          display: inline-block
          height: .44rem
          color: #212121
          font-size: .32rem
          line-height: .44rem
      .right
        float: right
        span
          position: relative;
          top: .15rem;
          right: .32rem;
          color: #616161;
          font-size: .24rem;
          line-height: .28rem;
      .no-float
        clear: both
    .main
      ul
        padding .1rem
        overflow-x: auto
        white-space: nowrap
        .item
          display: inline-block
          text-align: center
          margin-right .12rem
          width: 2rem
          .header
            position: relative
            img
              width: 100%
              height: 100%
            span
              top: 0px
              position: absolute
              display: block
              width: .86rem
              background-color: #ff6030
              border-radius: .05rem
              color: #ffffff
          .footer
            .title
              margin-top: .12rem;
              color: #212121;
              font-size: .24rem;
              line-height: .32rem;
              text-align: center;
              hidden()
            .money
              color: #616161

</style>
